<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBookDetail, borrowBook } from '@/api/book'
import type { Book } from '@/types/book'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const book = ref<Book | null>(null)
const loading = ref(false)

// 获取图书详情
const fetchBookDetail = async () => {
  try {
    loading.value = true
    const bookId = Number(route.params.id)
    const response = await getBookDetail(bookId)
    book.value = response.data
  } catch (error) {
    console.error('获取图书详情失败:', error)
    ElMessage.error('获取图书详情失败')
    router.push({ name: 'books' })
  } finally {
    loading.value = false
  }
}

// 借阅图书
const handleBorrow = async () => {
  try {
    if (!book.value) return

    await ElMessageBox.prompt('请输入预计归还日期', '借阅图书', {
      inputPlaceholder: 'YYYY-MM-DD',
      inputPattern: /^\d{4}-\d{2}-\d{2}$/,
      inputErrorMessage: '日期格式不正确'
    })

    const expectedReturnDate = '2025-10-30' // 实际应用中应该使用用户输入的值
    const response = await borrowBook({
      bookId: book.value.bookId,
      expectedReturnDate
    })

    ElMessage.success('借阅成功')
    fetchBookDetail() // 刷新图书状态
  } catch (error) {
    console.error('借阅失败:', error)
    if (error !== 'cancel') {
      ElMessage.error('借阅失败')
    }
  }
}

// 初始化加载数据
onMounted(() => {
  fetchBookDetail()
})
</script>

<template>
  <div class="book-detail-container">
    <el-card v-if="book" :loading="loading">
      <template #header>
        <div class="header">
          <span>图书详情</span>
          <el-button type="primary" @click="router.go(-1)">返回</el-button>
        </div>
      </template>

      <div class="book-info">
        <div class="cover">
          <el-image
            :src="book.coverUrl || 'https://via.placeholder.com/200x300'"
            fit="contain"
            style="width: 200px; height: 300px;"
          />
        </div>
        <div class="detail">
          <h2>{{ book.title }}</h2>
          <div class="meta">
            <p><span class="label">作者：</span>{{ book.author }}</p>
            <p><span class="label">ISBN：</span>{{ book.isbn }}</p>
            <p><span class="label">分类：</span>{{ book.category }}</p>
            <p><span class="label">状态：</span>
              <el-tag v-if="book.status === 0" type="success">可借阅</el-tag>
              <el-tag v-else type="danger">已借出</el-tag>
            </p>
          </div>
          <div class="actions">
            <el-button
              type="primary"
              :disabled="book.status !== 0"
              @click="handleBorrow"
            >
              借阅
            </el-button>
          </div>
        </div>
      </div>

      <div class="description">
        <h3>图书简介</h3>
        <p>{{ book.description || '暂无简介' }}</p>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.book-detail-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.book-info {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.detail {
  flex: 1;
}

.detail h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
}

.meta p {
  margin: 10px 0;
  font-size: 16px;
}

.label {
  font-weight: bold;
  color: #606266;
  width: 80px;
  display: inline-block;
}

.actions {
  margin-top: 30px;
}

.description {
  margin-top: 30px;
}

.description h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

.description p {
  line-height: 1.6;
  color: #606266;
}
</style>
